<!-- 客户定制 -->
<template>
	<view class="page">
			<zero-loading v-if="loading" type="love" :mask="true"></zero-loading>
		<view class="myCustom">
			<uni-collapse @change="change"  ref="collapse">
				<uni-collapse-item :title="title" :show-animation="true" 
					type="line" :open="customVisble">
					<view class="content">
						<!-- 我订阅的关键字 -->
						<view class="title setVerticalCenter">

							<u-icon name="tags-fill" color="#00aaff" size="40"></u-icon>
							<text>订阅的关键词</text>
						</view>

						<view class="keyword">
							<view v-for="(item,index) in myData.keywords" :key="index" class="keyword_item">
								<view class="setVerticalCenter">
									<text class="close">{{item}}</text>
									 <!--  color="#ffd9d7" -->
									<uni-icons @click="deleteKeyword(item)" type="clear" size="20" color="#18b566"></uni-icons>
								</view>
							</view>
							<!-- #376ace -->
							<view class="keyword_item setVerticalCenter"  style="background-color:rgba(0, 157, 234, 0.1);color: #00aaff;" @click="addKeywordPop">
								<view class="setVerticalCenter" style="margin-right: 10rpx;">			
									<uni-icons   type="plusempty" size="15" color="#00aaff"></uni-icons>
									<text>增加</text>
								</view>
							</view>
						</view>
						<!-- 我订阅的城市 -->
						<view class="title setVerticalCenter">
							<u-icon name="map-fill" color="#00aaff" size="40"></u-icon>
							<text>订阅的城市</text>
						</view>
						<view class="keyword">
							<view v-for="(item,index) in myData.citys" :key="index" class="keyword_item">
								
								<view>
									<text  class="close">{{item}}</text>
									<uni-icons type="clear" @click="deleteCity(item)" size="20" color="#18b566">
									</uni-icons>
								</view>
							</view>
							<view class="keyword_item setVerticalCenter " style="background-color:rgba(0, 157, 234, 0.1);color: #00aaff;" @click="addCityPop">
								<view class="setVerticalCenter " style="margin-right: 10rpx;">
									<uni-icons   type="plusempty" size="15" color="#00aaff"></uni-icons>
									<text>增加城市</text>
								</view>
								
							</view>
						</view>
						<!-- 我关注的公司 -->
						<view></view>
					</view>
				</uni-collapse-item>

			</uni-collapse>
		</view>
		
		<view class="tip" v-if="tipShow">
			<u-icon name="info-circle-fill" size="40" color="#00aa8f" label-color="#00aa8f" label="为了让您更精准获取招标信息,请订阅您关注的城市和关键字."></u-icon>
		</view>
		<view style="position: relative;">
			<!-- 显示招标信息 -->
			<wyb-drop-down ref="dropDown" :zIndex='1' :options="options" @select="onItemSelect" @hide="getListData">
				<!-- 自定义模式开启时，这里可以放内容 -->
			</wyb-drop-down>
		</view>

		<view class="mycontent">

			<scroller @init="initScroller" @down="refreshData" @up="getListData" :up="optUp" :fixed="false">

				<articleList :list="list" />
			</scroller>
		</view>





		<!-- 关键字弹窗 -->
		<uni-popup ref="popup" background-color="#fff" type="right">
			<view @click="hidePop" class="setPadding">
				<u-icon name="arrow-right-double" color="#0e0e0f" size="28"></u-icon>
			</view>
			<scroll-view scroll-y=true style="height: 85vh;">
				<view class="title setVerticalCenter">
					<u-icon name="man-add-fill" color="#00aaff" size="40"></u-icon>增加关键词
				</view>
				<view style="display: flex;margin: 20rpx;">

					<input type="text" style="border-bottom: 1px solid #dfdfdf;height: 56rpx;" v-model="value"
						placeholder="请输入关键字" />
					<view class="button-mini-blue" @click="addSelectedKeyword(value)">
						<uni-icons type="plusempty" color="#fff"></uni-icons>
						添加
					</view>

				</view>

				<view class="popup-content">
					<view v-for="(item,index) in selectedKeyword" :key="index" class="category_select">
						
						<view>
							<text class="close">{{item}}</text>
							<uni-icons @click="deleteKeyword2(item)" type="clear" size="20" color="##18b566"></uni-icons>
						</view>
					</view>
				</view>
				<view class="title setVerticalCenter">
					<u-icon name="integral-fill" color="#00aaff" size="40"></u-icon>
					最热关键词
				</view>
				<view class="popup-content">
					<view v-for="(item,index) in category" :key="index" class="category">
						<text @click="addSelectedKeyword(item.name)">{{item.name}}</text>
					</view>
				</view>

				<view class="button" @click="addOk">
					<uni-icons type="checkmarkempty" color="#18b566"></uni-icons>
					确定
				</view>
			</scroll-view>
		</uni-popup>

		<!-- 城市弹窗 -->
		<uni-popup ref="popupCity" background-color="#fff" type="right">
			<view @click="hidePop" class="setPadding">
				<u-icon name="arrow-right-double" color="#303133" size="28"></u-icon>
			</view>
			<scroll-view :scroll-y='true' style="height: 85vh;">
				
				<view class="title setVerticalCenter">
					<u-icon name="map-fill" color="#00aaff" size="40"></u-icon>
					<text>增加城市</text>
				</view>
				<view style="display: flex;margin: 20rpx;">

					<input type="text" style="border-bottom: 1px solid #dfdfdf;height: 56rpx;" v-model="value"
						placeholder="请输入省份或者城市名" />
					<view class="button-mini-blue" @click="addSelectedCity(value)">
						<uni-icons type="plusempty" color="#18b566"></uni-icons>
						添加
					</view>

				</view>

				<view class="popup-content">
					<view v-for="(item,index) in selectedCity" :key="index" class="category_select">
						
						<view>
							<text class="close">{{item}}</text>
							<uni-icons @click="deleteCity2(item)" type="clear" size="20" color="##18b566"></uni-icons>
						</view>
					</view>
				</view>
				<view class="title setVerticalCenter">
					<u-icon name="integral-fill" color="#00aaff" size="40"></u-icon>
					<text>热门城市</text>
				</view>
				<view class="popup-content">
					<view v-for="(item,index) in hotCitys" :key="index" class="category">
						<text @click="addSelectedCity(item)">{{item}}</text>
					</view>
				</view>

				<view class="button" @click="addOkCity">
					<uni-icons type="checkmarkempty" color="#ffd9d7"></uni-icons>
					确定
				</view>
			</scroll-view>
		</uni-popup>

		<!-- 没有网络的情况 -->
		<u-no-network></u-no-network>
	</view>

</template>

<script>
	import util from '@/common/util.js'
	export default {
		data() {
			return {
				loading:false,
				// 是否出现提示文本
				tipShow:false,
				//过滤器
				options: [{
					header: '关键字',
					// contents在自定义开启时可以不用传
					contents: ['全部'],

				}, {
					header: '地区',
					contents: ['全部']
				}, {
					header: '招标公告',
					contents: ['招标公告', '中标结果', '其他公告', '中标候选人']
				}],

				title: '点击【收起】我的定制内容',
				customVisble: true, //是否展开定制面板
				myData: {
					keywords: [],
					citys: [],
					companys: []
				},
				//系统里面自带的热词
				category: [],
				//已添加的关键词
				selectedKeyword: [],
				//自定义的添加的关键字
				value: '',
				//订阅城市开始
				hotCitys: [
					"北京市", "上海市", "广州市", "深圳市", "杭州市", "成都市", "苏州市", "南京市", "重庆市", "武汉市", "长沙市",
					"广东省", "江苏省", "浙江省", "四川省", "湖南省"
				],
				//已添加的城市
				selectedCity: [],
				//列表开始
				scroller: {},
				optUp: {
					auto: true,
					onScroll: true,
					page: {
						size: 20
					},
					empty: {
						tip: '部分地区陆续开通中~'
					}
				},
				queryData: {
					provinceName: '', //省份查询
					areaName: '', //地区查询
					title: '',
					precise: '', //导航栏
					//招标分类
					noticeType: '招标公告',
				},
				list: [],
				//滚动条高度
				scollHeight:'400'
			}
		},
		created() {
			uni.$on('listUpdata2', () => {
				// 拿取用户保存在本地的点赞和收藏数据
				let localisFav=uni.getStorageSync('localisFav')
				let localDigg=uni.getStorageSync('localDigg')
				let arr=this.list
				this.list=[]
				// 更新首页点赞收藏
				arr.forEach(item=>{
					if(localisFav){
						localisFav.forEach(fav=>{
							if(fav==item.id)
								item.isFav=1
						})
					}
					if(localDigg){
						localDigg.forEach(digg=>{
							if(digg==item.id)
								item.isDigg=1
						})
					}
					this.list.push(item)
				})
			
			})	
		},
		onLoad(op) {
			
			
		},
		onShow() {
			let isLogin = uni.getStorageSync('isLogin') ;
			if(isLogin==1){
				//启动初始化
				this.start();
				//订阅数据
				this.getData();	
				
				//setTimeout(this.onLogin,1000);
			}
			
			
			
			
		},
		beforeMount() {
			
			this.closeSubscribe()
		},
		beforeDestroy() {
			uni.$off('listUpdata2'); 
		},
		methods: {
			//登录之前的页面
			onLogin(){
				
				//登录之前的页面
				let isLogin = uni.getStorageSync("isLogin");
				if(isLogin=='1'){ 
					
					let page = this.getMyCache('onLoginPage');
					
					if(page){
						
						this.clearMyCache('onLoginPage');
						
						uni.showModal({
							title: '提示',
							content: '是否查看上一条招标信息？',
							confirmText: '是',
							cancelText: '否',
							success: result => {
								if (result.confirm) {
									uni.navigateTo({
										url:page
									})
								}
							}
						})
					
					}
				}
			},
			
			//提醒设置订阅
			tipCustom(){
			
				if(this.myData.keywords.length==0 && this.myData.citys.length==0){
					// this.$alert('为了让您更精准获取招标信息,请订阅您关注的城市和关键字.');
					// 打开提示语
					this.tipShow=true
					this.openSubscribe()
				}else{
					
					this.tipShow=false
					this.closeSubscribe()
				}
			},
			/*获取分类数据*/
			getCategory() {

				this.category = [];

				let url = this.$baseApp.api.zhaobiao.hotWord;

				this.$http.get(url).then(res => {
					if (res.code == 200) {
						
						res.data.zhaobiao.forEach(item=>{
							this.category.push(item)
						})
						
					} else {
						this.$alert(res.msg);
					}
				})
			},
			//启动加载
			start() {
				let custom_hide = this.getMyCache("custom_hide");
				if (custom_hide == "1") {
					this.customVisble = false;
				} else {
					this.customVisble = true;
				}
				
				uni.getSystemInfo({
					success: res => {
						this.screenHeight = (res.screenHeight * (750 / res.windowWidth)) - 336 //将px 转换rpx
						this.scollHeight = res.screenHeight-140 ;
					}
				});
			},
			//加载数据
			getData() {
				//加载订阅的关键字等信息
				let url = this.$baseApp.api.customMade.getData;

				this.$http.get(url).then(res => {
					if (res.code == "200") {
						if(res.data){
							if(res.data.keyWord){
								this.myData.keywords = res.data.keyWord;
								this.options[0].contents = this.options[0].contents.concat(this.myData.keywords);
							}
							
							if(res.data.areaName){
								this.myData.citys = res.data.areaName;
								this.options[1].contents = this.options[1].contents.concat(this.myData.citys);
							}
						}
							this.tipCustom()
						
					}
				});
				this.tipCustom()
				
			},
			//折叠和显示我的订阅面板
			change(e) {
				if (e["0"] != null) {
					this.openSubscribe()

				} else {
					this.closeSubscribe()
				}
			},
			
			// 展开折叠面板
			openSubscribe(){
				this.title = '点击【收起】我的订阅内容';
				this.setMyCache('custom_hide', '0');
			},
			// 收起折叠面板
			closeSubscribe(){
				this.title = '点击【展开】我的订阅内容';
				this.setMyCache('custom_hide', '1');
			},
			
			//删除关键字
			deleteKeyword(item) {
				util.arrayRemove(this.myData.keywords,item)
				this.saveCustom();

			},

			deleteKeyword2(item) {
				
				//app不支持这样的写法
				util.arrayRemove(this.selectedKeyword,item)
			},
			//删除城市
			deleteCity(item) {
				
				util.arrayRemove(this.myData.citys,item);
				this.saveCustom();
			},
			//删除城市
			deleteCity2(item) {
				
				util.arrayRemove(this.selectedCity,item);
			},
			//保存到数据库
			saveCustom() {
				let url = this.$baseApp.api.customMade.save;
				this.$http.post(url, this.myData).then(res => {
					
					if(res.code==200){
						uni.showToast({
							title:'保存成功'
						})
						this.getData()
					}
				})
				
				// 小程序中不支持collapse自动更新 ，需要手动resize 更新组件高度
				// #ifdef MP
				this.$nextTick(() => {
					this.$refs.collapse.resize()
				})
				// #endif
				
				//更新过滤器
				this.options[0].contents = this.options[0].contents.concat(this.myData.keywords);
				this.options[1].contents = this.options[1].contents.concat(this.myData.citys);
				
				 
				
				this.getListData()
			},
			//增加关键字
			addKeywordPop() {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open();
				//显示系统提供的热词参考
				this.getCategory();
			},

			//显示城市列表
			addCityPop() {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popupCity.open();
			},


			//添加关键字
			addSelectedKeyword(value) {
				if (value == '') {
					return;
				}
				
				util.arrayRemove(this.selectedKeyword,value)
				this.selectedKeyword.push(value);
				this.value = ""
				
			},

			//添加关键字
			addSelectedCity(value) {
				if (value == '') {
					return;
				}
			
				util.arrayRemove(this.selectedCity,value);
				this.selectedCity.push(value);
				this.value = ""
			},

			//增加ok
			addOk() {
				this.$refs.popup.close();
				this.selectedKeyword.forEach((item, index) => {
					
					util.arrayRemove(this.myData.keywords,item);
					this.myData.keywords.push(item);
				})
				this.saveCustom();

			},

			addOkCity() {
				this.$refs.popupCity.close();
				this.selectedCity.forEach((item, index) => {
				
					util.arrayRemove(this.myData.citys,item);
					this.myData.citys.push(item);
				})
				this.saveCustom();
			},
			//隐藏层
			hidePop() {
				this.$refs.popup.close();
				this.$refs.popupCity.close();
			},

			//////////////////加载数据的方法////////////////////////
			/*初始化滚动*/
			initScroller(scroller) {
				this.scroller = scroller;
				this.scroller.num = 1
				this.scroller.pageSize = 20
			},

			/*刷新数据*/
			refreshData() {
				uni.showLoading({
					title: '刷新中'
				});
				this.scroller.resetUpScroll();
			},

			/*加载数据*/
			loadData() {

				this.list = [];
				this.currentSliderIndex = 0;
				this.scroller.resetUpScroll();
			},
			/*获取数据*/
			getListData() {
			this.loading=true
				let url = this.$baseApp.api.customMade.zbList;
				let data = {

					page: this.scroller.num,
					pageSize: this.scroller.size,
					precise: this.queryData.precise, //导航栏关键字分类查询
					noticeType: this.queryData.noticeType, //招标公告 中标候选人 中标结果 更正公告公示,示例值(招标公告)
					areaName: this.queryData.areaName || '', //地区
					provinceName: this.queryData.provinceName || '', //省份
					projectName: this.queryData.title //项目名称
				};

				this.$http.get(url, data).then(res => {
					
					if (res.code == "200") {
						if (this.scroller.num == 1) {
							this.list = [];
						}
						let localisFav=uni.getStorageSync('localisFav')
						let localDigg=uni.getStorageSync('localDigg')
						let arr=null
						res.data.content.forEach(item => {
							if(localisFav){
								localisFav.forEach(fav=>{
									if(fav==item.id)
										item.isFav=1
								})
							}
							if(localDigg){
								localDigg.forEach(digg=>{
									if(digg==item.id)
										item.isDigg=1
								})
							}
							if(item.noticeTitle.length>=36){
								arr=item.noticeTitle
							
								item.noticeTitle=arr.slice(0,35)+"..."
							}
							
							
							})
						this.list = this.list.concat(res.data.content);
						this.scroller.endByPage(res.data.content.length, res.data.totalPages);
						this.showPageLoading = false;
						uni.hideLoading();
					} else {
						this.scroller.endSuccess();
						this.$alert(res.msg);
					}
				})
				this.loading=false
			},

			//点击过滤器
			onItemSelect(e) {
				
				this.options[e.headerIndex].header = e.content;
				this.setParams()
				this.$refs.dropDown.close()
			},

			//根据查询的条件设置参数
			setParams() {
				if (this.options[0].header == '关键字' || this.options[0].header == '全部') {
					this.queryData.title = ''
				} else {
					this.queryData.title = this.options[0].header
				}

				if (this.options[1].header == '地区' || this.options[1].header == '全部') {
					this.queryData.areaName = ''
				} else {
					this.queryData.areaName = this.options[1].header
				}


				if (this.options[2].header == '分类' || this.options[2].header == '全部') {
					this.queryData.noticeType = ''
				} else {
					this.queryData.noticeType = this.options[2].header
				}



			}
		}
	}
</script>

<style scoped lang="scss">
	.myCustom {
		z-index: 2;

		.content {
			// background-color: #eaeaea;
			// background-color:#f4f4f5 ;
			border-top: 1rpx solid #eee;
			padding-top: 10rpx;
			padding-bottom: 10rpx;
		}
	}
	.tip{
		box-sizing: border-box;
		padding: 20rpx 28rpx 0;
	}
	.title {
		margin: 20rpx 20rpx 0 20rpx; 
		font-size: 32rpx;

	}

	.keyword {
		display: flex;
		flex-wrap: wrap;
		
	}

	.keyword_item {
		padding: 0rpx 4rpx;
		min-width: 100rpx;
		background-color:rgba(0, 182, 133, 0.1);
		// background-color: #00aa8f;
		// background-color:#18b566 ;
		// background-color: #fff;
		// border: 1rpx solid #18b566 ;
		// color: #18b566;
		
		margin: 12rpx;
		border-radius: 10rpx;
		text-align: center;
		color: #ffffff;
		font-size: 30rpx;
		
		.close {
			margin: 0 6rpx;
			color: #18b566;
		}


	}

	

	.popup-content {
		margin-top: 20rpx;
		width: 300px;
		display: flex;
		flex-wrap: wrap;
	}

	//我选择的分类
	.category_select {
		padding: 0rpx 8rpx;
		min-width: 100rpx;
		// background-color: #00aa8f;
			background-color:rgba(0, 182, 133, 0.1);
		margin: 20rpx;
		border-radius: 10rpx;
		text-align: center;
		// color: #ffffff;
		color: #18b566;
		font-size: 30rpx;
		.close {
			margin: 0 6rpx;
		}
	}

	//系统自带的分类
	.category {
		min-width: 120rpx;
		height: 60rpx;
		// border: 1px solid #7efdbc;
		margin: 20rpx;
		border-radius: 10rpx;
		text-align: center;
		// color: #919191;
		// color: #f4f4f5;
		background-color:rgba(0, 182, 133, 0.1);
		color: #18b566;
		font-size: 30rpx;
	}

	.page {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		height: 100%;
	}

	.mycontent {
		flex: 1;
		width: 100%;
		height: 100rpx;

	}
</style>
